<template>
  <qx-table :data="tableData" :option="tableOption"
            class="no-shadow no-padding bg-transparent non-margin-top q-mt-sm"></qx-table>
  <q-modal v-model="modalVisible" :header="`${$t('Misc.SpecifyDetails', { name: $t('TaskCore.AbnormalTask') })}`"
           :menuBtn="false" :persistent="false" width="620">
    <QInfo :columns="tableOption.column || []" :rowInfo="rowInfo" cols="2"></QInfo>
  </q-modal>
</template>

<script setup>
import { i18n } from 'boot/i18n'
import { postAPI } from 'src/api/index.js'
import { computed, onMounted, ref } from 'vue'

const rowInfo = ref({})
const tableData = ref([])
const modalVisible = ref(false)
const tableOption = computed(() => {
  return {
    page: false, index: false,
    column: [{
      label: `${i18n.t('TaskCore.TaskCode')}`, field: 'taskCode', minWidth: 80,
      cellClick: row => {
        rowInfo.value = row
        modalVisible.value = true
      }
    }, {
      label: `${i18n.t('TaskCore.TaskGroupCode')}`, field: 'taskGroupCode', minWidth: 80, hide: true
    }, {
      label: `${i18n.t('AGVCore.AGVCode')}`, field: 'agvCode', minWidth: 80
    }, {
      label: `${i18n.t('Misc.ExceptionReason')}`, field: 'taskErrorInfo', minWidth: 80, hide: true
    }, {
      label: `${i18n.t('MapCore.StartStation')}`, field: 'taskStringPoint', minWidth: 80, hide: true
    }, {
      label: `${i18n.t('MapCore.EndStation')}`, field: 'taskEndPoint', minWidth: 80, hide: true
    }, {
      label: `${i18n.t('CarrierCore.RackCode')}`, field: 'taskShelvesCode', minWidth: 80
    }, {
      label: `${i18n.t('CreationTime')}`, field: 'taskCreateTime', minWidth: 80
    }]
  }
})

const initData = () => {
  postAPI('/yfagv/api/agvAllStatus/agvTaskInfo', { nonLoadingBar: true }, data => {
    tableData.value = data
  }, () => {
    tableData.value = []
  })
}
onMounted(initData)
</script>